<template>
  <div
    class="titleborder"
    :style="{
      padding: getscalepxc(0),
      margin: getscalepxc(5),
      width: 'calc(100% - ' + getscalepxc(10) + ')',
      height: 'calc(100% - ' + getscalepxc(10) + ')',
    }"
  >
    <div class="titlecontent" :style="titleContentStyle">
      <slot />
    </div>
  </div>
</template>

<script>
import defaultmixins from "@/mixins/bigScreen/defaultmixins";

import commonmixins from "@/mixins/bigScreen/commonmixins";

//纯色title

export default {
  name: "commonborder",
  mixins: [defaultmixins, commonmixins],
  props: ["title"],
  data() {
    return {
      backUrl: require("@/assets/linglong/bg_yongdiantitle_hover.png"),
    };
  },
  computed: {
    titleContentStyle() {
      const height = 72 * this.$root.setting.scale;
      return {
        // ...this.borderOptions.titleContent,
        // height: `calc(100% - ${0}px)`,
      };
    },
    unitStyle() {
      return {
        color: "#4FC7FF",
        fontSize: 24 * this.$root.setting.scale,
      };
    },
    mainTitleStyle() {
      return {
        color: "white",
        fontSize: 38 * this.$root.setting.scale + "px",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.titleborder {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/configuration/2d/zzbpbg.png");
}

.titlespan {
  // border: 1px dashed #fffdef;
  width: fit-content;
  background-size: 100% 100%;
  text-align: center;
}
.titlecontent {
}
.lbdiv {
}
</style>
